---
title: Icônes
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

Une liste d'icônes utilisées dans notre application.

## Icônes Tabler

Nous utilisons les icônes Tabler pour React dans toute l'application.

<Tabs>

<Tab title="Installation"><br/>

```
yarn add @tabler/icons-react
```

</Tab>

<Tab title="Props">

Vous pouvez importer chaque icône en tant que composant. Here's an example: <br />

```jsx
import { IconArrowLeft } from "@tabler/icons-react";

export const MyComponent = () => {
  return <IconArrowLeft color="red" size={48} />;
};
```

</Tab>

<Tab title="Props">

| Propriétés | Type   | Description                                   | Par défaut      |
| ---------- | ------ | --------------------------------------------- | --------------- |
| taille     | nombre | La hauteur et la largeur de l'icône en pixels | 24              |
| couleur    | chaîne | La couleur des icônes                         | couleurCourante |
| trait      | nombre | La largeur du trait de l'icône en pixels      | 2               |

</Tab>

</Tabs>

## Icônes personnalisées

En plus des icônes Tabler, l'application utilise également certaines icônes personnalisées.

### Icône Carnet d'adresses

Affiche une icône de carnet d'adresses.

<Tabs>

<Tab title="Usage">

```jsx
import { IconAddressBook } from 'twenty-ui/display';

export const MyComponent = () => {
  return <IconAddressBook size={24} stroke={2} />;
};
```

</Tab>

<Tab title="Props">

| Propriétés | Type   | Description                                   | Par défaut |
| ---------- | ------ | --------------------------------------------- | ---------- |
| taille     | nombre | La hauteur et la largeur de l'icône en pixels | 24         |
| trait      | nombre | La largeur du trait de l'icône en pixels      | 2          |

</Tab>

</Tabs>
